<template>
  <view class="profile-page">
    <!-- 用户信息头部 -->
    <view class="profile-header">
      <view class="header-bg">
        <view class="bg-decoration"></view>
      </view>
      
      <view class="user-info">
        <view class="avatar-section">
          <image 
            :src="userInfo.avatar || '/static/logo.png'" 
            class="user-avatar"
            mode="aspectFill"
          />
        </view>
        
        <view class="user-details">
          <text class="user-name">{{ displayName }}</text>
          <text class="user-phone">{{ formatPhone(userInfo.phone) }}</text>
          <view class="user-roles">
            <view 
              v-for="role in userRoles" 
              :key="role.type"
              class="role-badge"
              :class="role.type"
            >
              {{ role.label }}
            </view>
            <view class="add-role" @click="handleBecomeOwner" v-if="!isOwner && isRenter">
              + 成为出租方
            </view>
          </view>
        </view>
        
        <view class="profile-actions">
          <view class="action-btn" @click="goToEdit">
            <u-icon name="edit-pen" size="16" color="#4A90E2" />
          </view>

        </view>
      </view>
      
      <!-- 认证状态 -->
      <view class="verification-status" v-if="showVerification">
        <view class="verify-item" @click="goToVerification">
          <u-icon 
            :name="userInfo.verified ? 'checkmark-circle-fill' : 'close-circle'"
            :color="userInfo.verified ? '#52c41a' : '#faad14'"
            size="16"
          />
          <text class="verify-text">
            {{ userInfo.verified ? '已完成实名认证' : '点击完成实名认证' }}
          </text>
          <u-icon name="arrow-right" size="12" color="#999" />
        </view>
      </view>
    </view>

    <!-- 数据统计 -->
    <view class="stats-section">
      <view class="stat-card">
        <view class="stat-item" @click="goToOrders()">
          <text class="stat-number">{{ userStats.totalOrders || 0 }}</text>
          <text class="stat-label">总订单</text>
        </view>
        <view class="stat-item" @click="goToOrders('ACTIVE')">
          <text class="stat-number">{{ userStats.activeOrders || 0 }}</text>
          <text class="stat-label">进行中</text>
        </view>
        <view class="stat-item" @click="goToFavorites">
          <text class="stat-number">{{ userStats.favoriteCount || 0 }}</text>
          <text class="stat-label">收藏</text>
        </view>
        <view v-if="isOwner" class="stat-item" @click="goToDeviceManage">
          <text class="stat-number">{{ userStats.deviceCount || 0 }}</text>
          <text class="stat-label">我的设备</text>
        </view>
      </view>
      
      <!-- 出租方收益信息 -->
      <view v-if="isOwner && userStats.earnings" class="earnings-card">
        <view class="earnings-header">
          <text class="earnings-title">收益概览</text>
          <text class="view-details" @click="goToEarnings">查看详情</text>
        </view>
        <view class="earnings-amount">
          <text class="amount-symbol">￥</text>
          <text class="amount-value">{{ userStats.earnings.total || 0 }}</text>
          <text class="amount-period">总收益</text>
        </view>
        <view class="earnings-stats">
          <view class="earnings-item">
            <text class="item-label">本月收益</text>
            <text class="item-value">￥{{ userStats.earnings.thisMonth || 0 }}</text>
          </view>
          <view class="earnings-item">
            <text class="item-label">待结算</text>
            <text class="item-value">￥{{ userStats.earnings.pending || 0 }}</text>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="menu-scroll">
      <!-- 租赁管理 -->
      <view class="menu-section">
        <view class="section-header">
          <text class="section-title">租赁管理</text>
        </view>
        <view class="menu-group">
          <view class="menu-item" @click="goToOrders()">
            <view class="menu-icon">
              <u-icon name="file-text" size="20" color="#4A90E2" />
            </view>
            <text class="menu-text">我的订单</text>
            <view class="menu-extra" v-if="userStats.activeOrders > 0">
              <text class="extra-badge">{{ userStats.activeOrders }}</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToFavorites">
            <view class="menu-icon">
              <u-icon name="heart" size="20" color="#ff6b6b" />
            </view>
            <text class="menu-text">收藏的设备</text>
            <view class="menu-extra" v-if="userStats.favoriteCount > 0">
              <text class="extra-badge">{{ userStats.favoriteCount }}</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToRentHistory">
            <view class="menu-icon">
              <u-icon name="clock" size="20" color="#faad14" />
            </view>
            <text class="menu-text">租赁历史</text>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
        </view>
      </view>

      <!-- 设备管理（出租方专用） -->
      <view v-if="isOwner" class="menu-section">
        <view class="section-header">
          <text class="section-title">设备管理</text>
        </view>
        <view class="menu-group">
          <view class="menu-item" @click="goToDeviceManage">
            <view class="menu-icon">
              <u-icon name="grid" size="20" color="#52c41a" />
            </view>
            <text class="menu-text">管理我的设备</text>
            <view class="menu-extra" v-if="userStats.deviceCount > 0">
              <text class="extra-badge">{{ userStats.deviceCount }}</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item highlight" @click="goToDeviceUpload">
            <view class="menu-icon">
              <u-icon name="plus-circle" size="20" color="#fa8c16" />
            </view>
            <text class="menu-text">发布新设备</text>
            <view class="menu-tip">
              <text class="tip-text">赚取收益</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToEarnings">
            <view class="menu-icon">
              <u-icon name="account" size="20" color="#722ed1" />
            </view>
            <text class="menu-text">收益明细</text>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToOwnerOrders">
            <view class="menu-icon">
              <u-icon name="list" size="20" color="#13c2c2" />
            </view>
            <text class="menu-text">收到的订单</text>
            <view class="menu-extra" v-if="userStats.receivedOrders > 0">
              <text class="extra-badge">{{ userStats.receivedOrders }}</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
        </view>
      </view>

      <!-- 功能管理 -->
      <view class="menu-section">
        <view class="section-header">
          <text class="section-title">功能管理</text>
        </view>
        <view class="menu-group">
          <!-- 账户管理功能 -->
          <view class="menu-item" @click="goToProfile">
            <view class="menu-icon">
              <u-icon name="account" size="20" color="#666" />
            </view>
            <text class="menu-text">个人资料</text>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToVerification">
            <view class="menu-icon">
              <u-icon 
                name="checkmark-circle-fill" 
                size="20" 
                :color="userInfo.verified ? '#52c41a' : '#faad14'"
              />
            </view>
            <text class="menu-text">实名认证</text>
            <view class="menu-extra">
              <text class="status-text" :class="{ verified: userInfo.verified }">
                {{ userInfo.verified ? '已认证' : '未认证' }}
              </text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <!-- 服务支持功能 -->
          <view class="menu-item" @click="contactService">
            <view class="menu-icon">
              <u-icon name="chat" size="20" color="#52c41a" />
            </view>
            <text class="menu-text">联系客服</text>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToFeedback">
            <view class="menu-icon">
              <u-icon name="edit-pen" size="20" color="#fa8c16" />
            </view>
            <text class="menu-text">意见反馈</text>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="menu-item" @click="goToAbout">
            <view class="menu-icon">
              <u-icon name="info-circle" size="20" color="#722ed1" />
            </view>
            <text class="menu-text">关于我们</text>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <u-button type="error" @click="logout" plain size="large" class="logout-btn">
          退出登录
        </u-button>
      </view>
      
      <view class="bottom-spacing"></view>
    </scroll-view>

    <!-- 角色选择弹窗 -->
    <u-popup v-model="showRoleSelector" mode="center" border-radius="20">
      <view class="role-modal">
        <view class="modal-header">
          <text class="modal-title">选择身份</text>
          <u-icon name="close" @click="showRoleSelector = false" size="20" />
        </view>
        <view class="modal-content">
          <text class="modal-desc">选择您要成为的身份类型</text>
          <view class="role-options">
            <view 
              v-for="role in availableRoleOptions" 
              :key="role.type"
              class="role-option"
              @click="addRole(role.type)"
            >
              <view class="role-icon">
                <u-icon :name="role.icon" size="24" :color="role.color" />
              </view>
              <view class="role-info">
                <text class="role-name">{{ role.label }}</text>
                <text class="role-desc">{{ role.description }}</text>
              </view>
              <u-icon name="arrow-right" size="14" color="#ccc" />
            </view>
          </view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import apiService from '@/api/index.js'
import { checkLoginForTabPage } from '@/utils/auth.js'

export default {
  data() {
    return {
      userInfo: {},
      userStats: {},
      loading: false,
      showRoleSelector: false,
      
      availableRoleOptions: [
        {
          type: 'owner',
          label: '出租方',
          icon: 'shop',
          color: '#52c41a',
          description: '发布设备获得租赁收益'
        }
      ]
    }
  },
  
  computed: {
    isRenter() {
      // 检查用户类型是否为租户
      return this.userInfo.userType === 'RENTER' || this.userInfo.userType === 'PLATFORM'
    },
    
    isOwner() {
      // 检查用户类型是否为出租方
      return this.userInfo.userType === 'OWNER'
    },
    
    isAllRoles() {
      return this.isRenter && this.isOwner
    },
    
    userRoles() {
      const roles = []
      if (this.userInfo.userType === 'RENTER') {
        roles.push({ type: 'renter', label: '租户' })
      } else if (this.userInfo.userType === 'OWNER') {
        roles.push({ type: 'owner', label: '出租方' })
      } else if (this.userInfo.userType === 'PLATFORM') {
        // PLATFORM用户默认显示为租户，但可以升级为出租方
        roles.push({ type: 'renter', label: '租户' })
      }
      return roles
    },
    
    availableRoles() {
      const available = []
      if (!this.isOwner) {
        available.push('出租方')
      }
      return available
    },
    
    showVerification() {
      return this.isOwner || !this.userInfo.verified
    },
    
    displayName() {
      // 根据接口返回格式：nickname有值就用，无值就用用户ID后6位
      if (this.userInfo.nickname) {
        return this.userInfo.nickname
      }
      if (this.userInfo.id) {
        // 如果没有nickname，使用用户ID后6位
        return '用户' + this.userInfo.id.slice(-6)
      }
      return '点击设置昵称'
    }
  },
  
  onLoad() {
    this.initPage()
  },
  
  onShow() {
    // 检查是否刚刚登录，如果是则延迟加载数据避免token刷新冲突
    const justLoggedIn = uni.getStorageSync('just_logged_in')
    if (justLoggedIn) {
      console.log('🔄 刚刚登录，延迟加载数据...')
      uni.removeStorageSync('just_logged_in')
      setTimeout(() => {
        this.loadUserInfo()
        this.loadUserStats()
      }, 500)
    } else {
      // 每次显示时刷新数据
      this.loadUserInfo()
      this.loadUserStats()
    }
  },
  
  methods: {

    
    async initPage() {
      // 使用统一的登录检查
      if (!checkLoginForTabPage()) {
        return
      }
      
      await this.loadUserInfo()
    },
    
    async loadUserInfo() {
      try {
        this.loading = true
        console.log('🔄 开始加载用户信息...')
        
        // 先从本地存储读取用户信息，立即显示
        const cachedUserInfo = uni.getStorageSync('user_info')
        if (cachedUserInfo) {
          console.log('📦 使用缓存的用户信息:', cachedUserInfo)
          this.userInfo = cachedUserInfo
        }
        
        // 检查token是否存在
        const token = uni.getStorageSync('token')
        console.log('🔑 当前token:', token ? '存在' : '不存在')
        
        if (!token) {
          console.log('🚫 没有token，跳转登录页')
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }, 1500)
          return
        }
        
        const response = await apiService.user.getUserProfile()
        console.log('✅ 用户信息加载成功:', response)
        
        // 检查是否是原始数据格式
        if (response.originalData) {
          this.userInfo = response.originalData
        } else if (response.data) {
          this.userInfo = response.data
        } else {
          this.userInfo = response
        }
        
        // 更新本地缓存
        uni.setStorageSync('user_info', this.userInfo)
        console.log('💾 用户信息已更新到本地存储:', this.userInfo)
        
      } catch (error) {
        console.error('❌ 加载用户信息失败:', error)
        console.error('错误详情:', {
          message: error.message,
          code: error.code,
          statusCode: error.statusCode
        })
        
        // 如果是Token刷新相关错误，显示提示但不跳转
        if (error.message && error.message.includes('Token已刷新')) {
          console.log('🔄 Token刷新相关错误，稍后自动重试')
          uni.showToast({
            title: '数据加载中，请稍候',
            icon: 'none',
            duration: 1000
          })
          return
        }
        
        // 如果是401错误，跳转登录
        if (error.code === 401 || error.statusCode === 401) {
          console.log('🚫 Token无效，需要重新登录')
          uni.showToast({
            title: '登录已过期，请重新登录',
            icon: 'none'
          })
          
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }, 1500)
          return
        }
        
        // 其他网络错误，显示提示但不影响使用缓存数据
        if (!this.userInfo || !this.userInfo.id) {
          console.log('⚠️ 使用模拟数据')
          this.userInfo = {
            id: 'cmdcqam910000u04op6rvdqvq',
            phone: '17363397220',
            email: '397694525@qq.com',
            username: null,
            nickname: 'yuming77',
            avatar: null,
            status: 'ACTIVE',
            role: 'USER',
            userType: 'PLATFORM',
            wxOpenId: null,
            wxUnionId: null,
            createdAt: '2025-07-21T06:32:20.004Z',
            updatedAt: '2025-07-29T16:56:36.439Z',
            profile: null,
            verified: false
          }
        }
      } finally {
        this.loading = false
      }
    },
    
    async loadUserStats() {
      try {
        // 获取用户统计数据
        const stats = await apiService.user.getUserStats()
        
        // 检查数据格式
        if (stats.originalData) {
          this.userStats = stats.originalData
        } else if (stats.data) {
          this.userStats = stats.data
        } else {
          this.userStats = stats
        }
        
        // 获取收藏数量
        try {
          const favoriteResponse = await apiService.device.getFavoriteList({ page: 1, limit: 1 })
          const favoriteData = favoriteResponse.originalData || favoriteResponse.data || favoriteResponse
          this.userStats.favoriteCount = favoriteData.total || 0
        } catch (favoriteError) {
          console.warn('获取收藏数量失败:', favoriteError)
          this.userStats.favoriteCount = 0
        }
        
        console.log('📊 用户统计信息加载成功:', this.userStats)
      } catch (error) {
        console.error('❌ 加载用户统计信息失败:', error)
        
        // 如果是Token刷新相关错误，不显示错误提示
        if (error.message && error.message.includes('Token已刷新')) {
          console.log('🔄 Token刷新相关错误，使用默认统计数据')
          this.userStats = {
            totalOrders: 0,
            activeOrders: 0,
            favoriteCount: 0,
            deviceCount: 0
          }
          return
        }
        
        // 使用模拟数据
        this.userStats = {
          totalOrders: 5,
          activeOrders: 2,
          favoriteCount: 8,
          deviceCount: this.isOwner ? 3 : 0,
          receivedOrders: this.isOwner ? 7 : 0,
          earnings: this.isOwner ? {
            total: 15600,
            thisMonth: 2800,
            pending: 1200
          } : null
        }
      }
    },
    
    formatPhone(phone) {
      if (!phone) return '未绑定手机'
      // 手机号中间4位用xxxx代替：173xxxx7220
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1xxxx$2')
    },

    
    // 处理成为出租方功能
    handleBecomeOwner() {
      // 检查当前用户角色，只有租户才显示此按钮
      if (!this.isRenter) {
        return
      }
      
      // 提示用户需要退出登录并注册出租方账号
      uni.showModal({
        title: '成为出租方',
        content: '您可以退出登录，并在登录时选择注册出租方，完成实名注册后即可发布设备',
        showCancel: true,
        confirmText: '退出登录',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.logout()
          }
        }
      })
    },

    async addRole(roleType) {
      this.showRoleSelector = false
      
      if (roleType === 'owner') {
        // 成为出租方需要特殊处理
        this.handleBecomeOwner()
        return
      }
      
      try {
        uni.showLoading({ title: '处理中...' })
        await apiService.user.addUserRole(roleType)
        
        // 刷新用户信息
        await this.loadUserInfo()
        
        uni.showToast({
          title: `已成为${roleType === 'owner' ? '出租方' : '租户'}`,
          icon: 'success'
        })
      } catch (error) {
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    
    // 页面跳转方法
    goToOrders(status = '') {
      // 订单页面是tabbar页面，需要使用switchTab
      if (status) {
        // 如果有状态参数，先切换到订单页面，然后通过全局事件传递参数
        uni.$emit('orderStatusFilter', status)
      }
      uni.switchTab({ url: '/pages/orders/list' })
    },
    
    goToFavorites() {
      uni.navigateTo({ url: '/pages/profile/favorites' })
    },
    
    goToRentHistory() {
      uni.navigateTo({ url: '/pages/profile/rent-history' })
    },
    
    goToDeviceManage() {
      uni.navigateTo({ url: '/pages/profile/device-manage' })
    },
    
    goToDeviceUpload() {
      // 检查是否已实名认证
      if (!this.userInfo.verified) {
        uni.showModal({
          title: '实名认证提示',
          content: '发布设备需要先完成实名认证。是否前往认证？',
          showCancel: true,
          confirmText: '去认证',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              this.goToVerification()
            }
          }
        })
        return
      }
      
      // 已认证用户直接跳转到发布页面
      uni.navigateTo({ url: '/pages/profile/device-upload' })
    },
    
    goToEarnings() {
      uni.navigateTo({ url: '/pages/profile/earnings' })
    },
    
    goToOwnerOrders() {
      uni.navigateTo({ url: '/pages/profile/owner-orders' })
    },
    
    goToEdit() {
      uni.navigateTo({ url: '/pages/profile/edit' })
    },
    
    goToProfile() {
      uni.navigateTo({ url: '/pages/profile/edit' })
    },
    
    goToVerification() {
      uni.navigateTo({ url: '/pages/profile/verification' })
    },
    

    
    goToFeedback() {
      uni.navigateTo({ url: '/pages/profile/feedback' })
    },
    
    goToAbout() {
      uni.navigateTo({ url: '/pages/profile/about' })
    },
    
    async contactService() {
      uni.showActionSheet({
        itemList: ['电话客服', '意见反馈'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              uni.makePhoneCall({
                phoneNumber: '0512-6617 4176'
              })
              break
            case 1:
              this.goToFeedback()
              break
          }
        }
      })
    },
    
    async logout() {
      try {
        const result = await this.showConfirmDialog('确定要退出登录吗？')
        if (result.confirm) {
          uni.showLoading({ title: '退出中...' })
          
          try {
            await apiService.auth.logout()
          } catch (error) {
            console.error('退出登录失败:', error)
          }
          
          // 清除本地存储
          uni.removeStorageSync('user_info')
          uni.removeStorageSync('token')
          
          uni.hideLoading()
          uni.reLaunch({
            url: '/pages/login/index'
          })
        }
      } catch (error) {
        console.error('退出登录失败:', error)
      }
    },
    
    showConfirmDialog(content) {
      return new Promise((resolve) => {
        uni.showModal({
          title: '确认操作',
          content,
          success: resolve
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  background: $bg-color;
  min-height: 100vh;
}

.profile-header {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-top: calc(var(--status-bar-height) + 40rpx);
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bg-decoration {
  position: absolute;
  top: -200rpx;
  right: -200rpx;
  width: 600rpx;
  height: 600rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.user-info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 32rpx 32rpx;
  gap: 24rpx;
}

.avatar-section {
  position: relative;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-edit {
  position: absolute;
  bottom: -8rpx;
  right: -8rpx;
  width: 40rpx;
  height: 40rpx;
  background: $primary-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid white;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: $font-size-xl;
  font-weight: $font-weight-bold;
  color: white;
  display: block;
  margin-bottom: 8rpx;
}

.user-phone {
  font-size: $font-size-base;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-bottom: 16rpx;
}

.user-roles {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex-wrap: wrap;
}

.role-badge {
  padding: 8rpx 16rpx;
  border-radius: $border-radius-base;
  font-size: $font-size-xs;
  font-weight: $font-weight-medium;
  
  &.renter {
    background: rgba(74, 144, 226, 0.2);
    color: #4A90E2;
  }
  
  &.owner {
    background: rgba(92, 184, 92, 0.2);
    color: #52c41a;
  }
}

.add-role {
  padding: 8rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-base;
  font-size: $font-size-xs;
  color: white;
  border: 2rpx dashed rgba(255, 255, 255, 0.5);
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.action-btn {
  width: 64rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
  margin-left: 16rpx;
}



.verification-status {
  position: relative;
  z-index: 1;
  margin: 0 32rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: $border-radius-base;
  backdrop-filter: blur(10rpx);
}

.verify-item {
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.verify-text {
  flex: 1;
  color: white;
  font-size: $font-size-base;
}

.stats-section {
  margin: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.stat-card {
  background: $bg-white;
  border-radius: $border-radius-lg;
  padding: 32rpx 24rpx;
  display: flex;
  box-shadow: $box-shadow-light;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.stat-number {
  font-size: 48rpx;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.stat-label {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.earnings-card {
  background: linear-gradient(135deg, #4A90E2 0%, #357abd 100%);
  border-radius: $border-radius-lg;
  padding: 32rpx;
  color: white;
}

.earnings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.earnings-title {
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
}

.view-details {
  font-size: $font-size-sm;
  color: rgba(255, 255, 255, 0.8);
}

.earnings-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 24rpx;
}

.amount-symbol {
  font-size: $font-size-base;
  margin-right: 8rpx;
}

.amount-value {
  font-size: 64rpx;
  font-weight: $font-weight-bold;
  margin-right: 16rpx;
}

.amount-period {
  font-size: $font-size-base;
  color: rgba(255, 255, 255, 0.8);
}

.earnings-stats {
  display: flex;
  gap: 40rpx;
}

.earnings-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.item-label {
  font-size: $font-size-sm;
  color: rgba(255, 255, 255, 0.7);
}

.item-value {
  font-size: $font-size-lg;
  font-weight: $font-weight-medium;
}

.menu-scroll {
  height: calc(100vh - 300rpx);
}

.menu-section {
  margin: 0 32rpx 24rpx;
}

.section-header {
  margin-bottom: 16rpx;
}

.section-title {
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  color: $text-secondary;
}

.menu-group {
  background: $bg-white;
  border-radius: $border-radius-lg;
  overflow: hidden;
  box-shadow: $box-shadow-light;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 2rpx solid $border-color;
  transition: background-color 0.2s;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: $bg-color;
  }
  
  &.highlight {
    background: linear-gradient(135deg, rgba(250, 140, 22, 0.05) 0%, rgba(250, 140, 22, 0.1) 100%);
  }
}

.menu-icon {
  width: 64rpx;
  height: 64rpx;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.menu-text {
  flex: 1;
  font-size: $font-size-base;
  color: $text-primary;
}

.menu-extra {
  margin-right: 16rpx;
}

.extra-badge {
  background: $primary-color;
  color: white;
  font-size: $font-size-xs;
  padding: 4rpx 12rpx;
  border-radius: $border-radius-sm;
  min-width: 32rpx;
  text-align: center;
}

.menu-tip {
  margin-right: 16rpx;
}

.tip-text {
  font-size: $font-size-xs;
  color: $primary-color;
  background: rgba(74, 144, 226, 0.1);
  padding: 4rpx 12rpx;
  border-radius: $border-radius-sm;
}

.status-text {
  font-size: $font-size-sm;
  color: $text-tertiary;
  
  &.verified {
    color: $success-color;
  }
}

.logout-section {
  padding: 40rpx 32rpx;
}

.logout-btn {
  height: 88rpx;
}

.bottom-spacing {
  height: calc(env(safe-area-inset-bottom) + 40rpx);
}

.role-modal {
  width: 600rpx;
  background: $bg-white;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid $border-color;
}

.modal-title {
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
  color: $text-primary;
}

.modal-content {
  padding: 32rpx;
}

.modal-desc {
  font-size: $font-size-base;
  color: $text-secondary;
  text-align: center;
  margin-bottom: 32rpx;
  display: block;
}

.role-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.role-option {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: $bg-color;
  border-radius: $border-radius-base;
  gap: 24rpx;
}

.role-icon {
  width: 80rpx;
  height: 80rpx;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.role-info {
  flex: 1;
}

.role-name {
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  color: $text-primary;
  display: block;
  margin-bottom: 8rpx;
}

.role-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
  display: block;
}
</style> 